<template>
  <ex-dialog
    width="900px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
    <el-tabs v-model="activeName">
        <el-tab-pane label="正文内容" name="one" :lazy="true">
          <div class="tabs-body">
            <div class="tabs-body-title" >【{{ruleForm.label == 1?'游玩':'美食'}}】{{ruleForm.name}}</div>
            <div class="tabs-body-content">
               <div class="tabs-body-html el-tiptap-editor__content" v-html="ruleForm.details" ></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="路线内容" name="two" :lazy="true">
          <div class="tabs-body">
            <div class="tabs-body-title">【{{ruleForm.label == 1?'游玩':'美食'}}】{{ruleForm.name}}</div>
            <div class="tabs-body-content">
              <el-table ref="table" v-loading="loading" :data="ruleForm.routesList" stripe border>
                <el-table-column label="顺序" align="center" prop="merchantName" :show-overflow-tooltip="true" width="100px" >
                  <template slot-scope="scope">
                    <span v-if="scope.$index == 0">起点</span>
                    <span v-else-if="scope.$index > 0 && (ruleForm.routesList.length-1) == scope.$index">终点</span>
                    <span v-else>途经点</span>
                  </template>
                </el-table-column>
                <el-table-column label="地点名称" align="center" prop="routesName"  width="300px" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span v-if="scope.row.routesName != ''">{{scope.row.routesName}}</span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column label="地址" align="center" prop="routesAddress" :show-overflow-tooltip="true" >
                   <template slot-scope="scope">
                      <span v-if="scope.row.routesName != ''">{{scope.row.routesAddress}}</span>
                      <span v-else>-</span>
                    </template>
                </el-table-column>
            </el-table>
            </div>
          </div>
        </el-tab-pane>
    </el-tabs>
  </ex-dialog>
</template>
<script>
export default {
  props: {
    visible: Boolean,
    ruleForm: Object,
  },
  data() {
    return {
      title: '查看攻略',
      activeName: 'one',
      loading: false,
      strategyContent:'',//富文本显示内容
      routesList:[],//线路内容显示
    }
  },
  created() {
    // console.log('this.ruleForm',this.ruleForm)
    // this.strategyContent = this.ruleForm.details
    // this.routesList = this.ruleForm.routesList
	},
  methods: {
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px 20px 20px;
  }
  ::v-deep .tabs-body-html {
      img{
        max-width: 100%;
      }
  }
}
::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}
.tabs-body-title{
    font-size: 17px;
    margin-top: 5px;
    margin-bottom: 15px;
  }


</style>